import React from "react";
import styles from "./index.module.less";
import contentList from "../contentList";

const ScrollBoard = (props) => {
    const { activeKey, getClickKey } = props;

    return (
        <div className={styles.scroll_board}>
            {contentList.map((item, index) => (
                <div
                    key={item.key}
                    className={`${styles.scroll_item} ${
                        activeKey === index ? styles.active : ""
                    }`}
                    onClick={() => {
                        getClickKey(index);
                    }}
                >
                    {item.title}
                </div>
            ))}
        </div>
    );
};

export default ScrollBoard;
